import { Button, Card } from 'antd';
import { history, useModel } from 'umi';
import bg from '/public/bg1.jpg';
import logo from '/public/timg.gif';
import { getBankName, getAppName } from '@/utils/common';
export default () => {
  const { initialState } = useModel('@@initialState');
  const goHome = () => {
    history.push('/');
  };
  const offsetWidth = document.body.offsetWidth;
  const offsetHeight = document.body.offsetHeight;
  const height = offsetHeight / 4;
  const width = offsetWidth / 4 - 20;
  const marginLeft = -width / 2;
  const marginTop = -height / 2;
  const appNo = initialState!.appNo!;
  const sysName = getBankName(appNo, true) + getAppName(appNo);
  const cardTitle = (
    <div style={{ verticalAlign: 'middle' }}>
      <span style={{ marginLeft: 0, fontSize: 18, color: 'blue' }}>
        {sysName}绩效考核及数仓数据运用平台
      </span>
    </div>
  );
  return (
    <div
      style={{
        width: offsetWidth,
        height: offsetHeight,
        backgroundImage: 'url(' + bg + ')',
        backgroundRepeat: 'no-repeat',
      }}
    >
      <div
        style={{
          width: width,
          height: height,
          position: 'absolute',
          left: '50%',
          top: '40%',
          marginLeft: marginLeft,
          marginTop: marginTop,
        }}
      >
        <Card title={cardTitle} bordered={true} className="login-card" style={{ width: '120%' }}>
          <img src={logo} style={{ width: '100%', marginTop: '-5%', marginLeft: '0%' }} />
          <div>
            <div
              style={{
                position: 'absolute',
                marginTop: '-20%',
                marginLeft: '5%',
                color: 'red',
                fontSize: 17,
              }}
            >
              提示：
              <br />
              系统正在处理数据，请稍后访问......
            </div>
            <Button type="primary" className="login-form-button" onClick={goHome}>
              重试
            </Button>
          </div>
        </Card>
      </div>
    </div>
  );
};
